<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=476549" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon icon">&#xe63a;</span>
                <div class="name">iconfont-5</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe618;</span>
                <div class="name">wxb报表</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe619;</span>
                <div class="name">wxb标王</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe61b;</span>
                <div class="name">wxb工具</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe61c;</span>
                <div class="name">wxb明星店铺</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe61d;</span>
                <div class="name">wxb品牌宝</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe61e;</span>
                <div class="name">wxb账户</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe61f;</span>
                <div class="name">wxb主页</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe620;</span>
                <div class="name">wxb搜索推广</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe624;</span>
                <div class="name">wxb定位</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe63f;</span>
                <div class="name">购物车</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe640;</span>
                <div class="name">购物车添加</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe641;</span>
                <div class="name">错误</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe642;</span>
                <div class="name">二维码</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe643;</span>
                <div class="name">聚收藏</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe645;</span>
                <div class="name">垃圾箱</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe646;</span>
                <div class="name">链接</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe648;</span>
                <div class="name">闹钟</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe649;</span>
                <div class="name">扫一扫</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe64a;</span>
                <div class="name">上翻</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe64b;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe64c;</span>
                <div class="name">声音</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe64d;</span>
                <div class="name">时间</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe64e;</span>
                <div class="name">收货地址</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe64f;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe650;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe651;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe652;</span>
                <div class="name">锁</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe653;</span>
                <div class="name">提示</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe654;</span>
                <div class="name">完成</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe655;</span>
                <div class="name">我的订单</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe656;</span>
                <div class="name">我的反馈</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe657;</span>
                <div class="name">我的红包</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe659;</span>
                <div class="name">我的聚划算</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe65a;</span>
                <div class="name">我的优惠券</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe65b;</span>
                <div class="name">下翻</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe65c;</span>
                <div class="name">下拉</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe65d;</span>
                <div class="name">向上箭头</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe65e;</span>
                <div class="name">向下箭头</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe65f;</span>
                <div class="name">向右箭头</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe660;</span>
                <div class="name">向左箭头</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe661;</span>
                <div class="name">眼睛</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe662;</span>
                <div class="name">意见反馈</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe663;</span>
                <div class="name">照相机</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe664;</span>
                <div class="name">正确</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe665;</span>
                <div class="name">消息中心</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe666;</span>
                <div class="name">另存为</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe667;</span>
                <div class="name">new</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe668;</span>
                <div class="name">聚</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe669;</span>
                <div class="name">算</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe66a;</span>
                <div class="name">划</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe66b;</span>
                <div class="name">聚</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe66c;</span>
                <div class="name">火</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe626;</span>
                <div class="name">聚专场</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe627;</span>
                <div class="name">iconfont-youhuiquan</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe628;</span>
                <div class="name">iconfont-xingxing</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe629;</span>
                <div class="name">iconfont-mingpian</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe62a;</span>
                <div class="name">iconfont-shouji</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe62c;</span>
                <div class="name">iconfont-riyongbaihuo</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe634;</span>
                <div class="name">iconfont-phone</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe636;</span>
                <div class="name">iconfont-qicheyongpin</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe637;</span>
                <div class="name">iconfont-jingxihuaxue</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe647;</span>
                <div class="name">iconfont-yiqiyibiao</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe66d;</span>
                <div class="name">支付宝付款</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe66e;</span>
                <div class="name">质量保障</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe67c;</span>
                <div class="name">30－1</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe67d;</span>
                <div class="name">7</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe67e;</span>
                <div class="name">免</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe685;</span>
                <div class="name">礼物</div>
                <div class="code-name">&amp;#xe685;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe687;</span>
                <div class="name">语音</div>
                <div class="code-name">&amp;#xe687;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe68d;</span>
                <div class="name">all</div>
                <div class="code-name">&amp;#xe68d;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe68e;</span>
                <div class="name">cart</div>
                <div class="code-name">&amp;#xe68e;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe690;</span>
                <div class="name">set</div>
                <div class="code-name">&amp;#xe690;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe6b0;</span>
                <div class="name">play</div>
                <div class="code-name">&amp;#xe6b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe6b1;</span>
                <div class="name">error</div>
                <div class="code-name">&amp;#xe6b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe6b2;</span>
                <div class="name">prompt</div>
                <div class="code-name">&amp;#xe6b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe6b3;</span>
                <div class="name">success</div>
                <div class="code-name">&amp;#xe6b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe6b6;</span>
                <div class="name">help</div>
                <div class="code-name">&amp;#xe6b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe6b9;</span>
                <div class="name">add</div>
                <div class="code-name">&amp;#xe6b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe6ba;</span>
                <div class="name">minus</div>
                <div class="code-name">&amp;#xe6ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe6bf;</span>
                <div class="name">attachment</div>
                <div class="code-name">&amp;#xe6bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe6c2;</span>
                <div class="name">phone</div>
                <div class="code-name">&amp;#xe6c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe6c3;</span>
                <div class="name">bad</div>
                <div class="code-name">&amp;#xe6c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe6c4;</span>
                <div class="name">text</div>
                <div class="code-name">&amp;#xe6c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon">&#xe6cb;</span>
                <div class="name">人民币</div>
                <div class="code-name">&amp;#xe6cb;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'icon';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#icon') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.icon {
  font-family: "icon" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="icon"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"icon" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon icon icon_iconfont5"></span>
            <div class="name">
              iconfont-5
            </div>
            <div class="code-name">.icon_iconfont5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_wxbbaobiao"></span>
            <div class="name">
              wxb报表
            </div>
            <div class="code-name">.icon_wxbbaobiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_wxbbiaowang"></span>
            <div class="name">
              wxb标王
            </div>
            <div class="code-name">.icon_wxbbiaowang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_wxbgongju"></span>
            <div class="name">
              wxb工具
            </div>
            <div class="code-name">.icon_wxbgongju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_wxbmingxingdianpu"></span>
            <div class="name">
              wxb明星店铺
            </div>
            <div class="code-name">.icon_wxbmingxingdianpu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_wxbpinpaibao"></span>
            <div class="name">
              wxb品牌宝
            </div>
            <div class="code-name">.icon_wxbpinpaibao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_wxbzhanghu"></span>
            <div class="name">
              wxb账户
            </div>
            <div class="code-name">.icon_wxbzhanghu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_wxbzhuye"></span>
            <div class="name">
              wxb主页
            </div>
            <div class="code-name">.icon_wxbzhuye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_wxbsousuotuiguang"></span>
            <div class="name">
              wxb搜索推广
            </div>
            <div class="code-name">.icon_wxbsousuotuiguang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_wxbdingwei"></span>
            <div class="name">
              wxb定位
            </div>
            <div class="code-name">.icon_wxbdingwei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_gouwuche"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.icon_gouwuche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_gouwuchetianjia"></span>
            <div class="name">
              购物车添加
            </div>
            <div class="code-name">.icon_gouwuchetianjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_cuowu"></span>
            <div class="name">
              错误
            </div>
            <div class="code-name">.icon_cuowu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_erweima"></span>
            <div class="name">
              二维码
            </div>
            <div class="code-name">.icon_erweima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_jushoucang"></span>
            <div class="name">
              聚收藏
            </div>
            <div class="code-name">.icon_jushoucang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_lajixiang"></span>
            <div class="name">
              垃圾箱
            </div>
            <div class="code-name">.icon_lajixiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_lianjie"></span>
            <div class="name">
              链接
            </div>
            <div class="code-name">.icon_lianjie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_naozhong"></span>
            <div class="name">
              闹钟
            </div>
            <div class="code-name">.icon_naozhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_saoyisao"></span>
            <div class="name">
              扫一扫
            </div>
            <div class="code-name">.icon_saoyisao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_shangfan"></span>
            <div class="name">
              上翻
            </div>
            <div class="code-name">.icon_shangfan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_shezhi"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon_shezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_shengyin"></span>
            <div class="name">
              声音
            </div>
            <div class="code-name">.icon_shengyin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_shijian"></span>
            <div class="name">
              时间
            </div>
            <div class="code-name">.icon_shijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_shouhuodizhi"></span>
            <div class="name">
              收货地址
            </div>
            <div class="code-name">.icon_shouhuodizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_shouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon_shouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_shuaxin"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.icon_shuaxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon_sousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_suo"></span>
            <div class="name">
              锁
            </div>
            <div class="code-name">.icon_suo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_tishi"></span>
            <div class="name">
              提示
            </div>
            <div class="code-name">.icon_tishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_wancheng"></span>
            <div class="name">
              完成
            </div>
            <div class="code-name">.icon_wancheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_wodedingdan"></span>
            <div class="name">
              我的订单
            </div>
            <div class="code-name">.icon_wodedingdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_wodefankui"></span>
            <div class="name">
              我的反馈
            </div>
            <div class="code-name">.icon_wodefankui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_wodehongbao"></span>
            <div class="name">
              我的红包
            </div>
            <div class="code-name">.icon_wodehongbao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_wodejuhuasuan"></span>
            <div class="name">
              我的聚划算
            </div>
            <div class="code-name">.icon_wodejuhuasuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_wodeyouhuiquan"></span>
            <div class="name">
              我的优惠券
            </div>
            <div class="code-name">.icon_wodeyouhuiquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_xiafan"></span>
            <div class="name">
              下翻
            </div>
            <div class="code-name">.icon_xiafan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_xiala"></span>
            <div class="name">
              下拉
            </div>
            <div class="code-name">.icon_xiala
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_xiangshangjiantou"></span>
            <div class="name">
              向上箭头
            </div>
            <div class="code-name">.icon_xiangshangjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_xiangxiajiantou"></span>
            <div class="name">
              向下箭头
            </div>
            <div class="code-name">.icon_xiangxiajiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_xiangyoujiantou"></span>
            <div class="name">
              向右箭头
            </div>
            <div class="code-name">.icon_xiangyoujiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_xiangzuojiantou"></span>
            <div class="name">
              向左箭头
            </div>
            <div class="code-name">.icon_xiangzuojiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_yanjing"></span>
            <div class="name">
              眼睛
            </div>
            <div class="code-name">.icon_yanjing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_yijianfankui"></span>
            <div class="name">
              意见反馈
            </div>
            <div class="code-name">.icon_yijianfankui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_zhaoxiangji"></span>
            <div class="name">
              照相机
            </div>
            <div class="code-name">.icon_zhaoxiangji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_zhengque"></span>
            <div class="name">
              正确
            </div>
            <div class="code-name">.icon_zhengque
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_xiaoxizhongxin"></span>
            <div class="name">
              消息中心
            </div>
            <div class="code-name">.icon_xiaoxizhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_lingcunwei"></span>
            <div class="name">
              另存为
            </div>
            <div class="code-name">.icon_lingcunwei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_new"></span>
            <div class="name">
              new
            </div>
            <div class="code-name">.icon_new
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_ju"></span>
            <div class="name">
              聚
            </div>
            <div class="code-name">.icon_ju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_suan"></span>
            <div class="name">
              算
            </div>
            <div class="code-name">.icon_suan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_hua"></span>
            <div class="name">
              划
            </div>
            <div class="code-name">.icon_hua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_ju1"></span>
            <div class="name">
              聚
            </div>
            <div class="code-name">.icon_ju1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_huo"></span>
            <div class="name">
              火
            </div>
            <div class="code-name">.icon_huo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_juzhuanchang"></span>
            <div class="name">
              聚专场
            </div>
            <div class="code-name">.icon_juzhuanchang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_iconfontyouhuiquan"></span>
            <div class="name">
              iconfont-youhuiquan
            </div>
            <div class="code-name">.icon_iconfontyouhuiquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_iconfontxingxing"></span>
            <div class="name">
              iconfont-xingxing
            </div>
            <div class="code-name">.icon_iconfontxingxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_iconfontmingpian"></span>
            <div class="name">
              iconfont-mingpian
            </div>
            <div class="code-name">.icon_iconfontmingpian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_iconfontshouji"></span>
            <div class="name">
              iconfont-shouji
            </div>
            <div class="code-name">.icon_iconfontshouji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_iconfontriyongbaihuo"></span>
            <div class="name">
              iconfont-riyongbaihuo
            </div>
            <div class="code-name">.icon_iconfontriyongbaihuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_iconfontphone"></span>
            <div class="name">
              iconfont-phone
            </div>
            <div class="code-name">.icon_iconfontphone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_iconfontqicheyongpin"></span>
            <div class="name">
              iconfont-qicheyongpin
            </div>
            <div class="code-name">.icon_iconfontqicheyongpin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_iconfontjingxihuaxue"></span>
            <div class="name">
              iconfont-jingxihuaxue
            </div>
            <div class="code-name">.icon_iconfontjingxihuaxue
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_iconfontyiqiyibiao"></span>
            <div class="name">
              iconfont-yiqiyibiao
            </div>
            <div class="code-name">.icon_iconfontyiqiyibiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_zhifubaofukuan"></span>
            <div class="name">
              支付宝付款
            </div>
            <div class="code-name">.icon_zhifubaofukuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_zhiliangbz"></span>
            <div class="name">
              质量保障
            </div>
            <div class="code-name">.icon_zhiliangbz
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_301"></span>
            <div class="name">
              30－1
            </div>
            <div class="code-name">.icon_301
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_7"></span>
            <div class="name">
              7
            </div>
            <div class="code-name">.icon_7
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_mian"></span>
            <div class="name">
              免
            </div>
            <div class="code-name">.icon_mian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_liwu"></span>
            <div class="name">
              礼物
            </div>
            <div class="code-name">.icon_liwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_yuyin"></span>
            <div class="name">
              语音
            </div>
            <div class="code-name">.icon_yuyin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_all"></span>
            <div class="name">
              all
            </div>
            <div class="code-name">.icon_all
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_cart"></span>
            <div class="name">
              cart
            </div>
            <div class="code-name">.icon_cart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_set"></span>
            <div class="name">
              set
            </div>
            <div class="code-name">.icon_set
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_play"></span>
            <div class="name">
              play
            </div>
            <div class="code-name">.icon_play
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_error"></span>
            <div class="name">
              error
            </div>
            <div class="code-name">.icon_error
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_prompt"></span>
            <div class="name">
              prompt
            </div>
            <div class="code-name">.icon_prompt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_success"></span>
            <div class="name">
              success
            </div>
            <div class="code-name">.icon_success
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_help"></span>
            <div class="name">
              help
            </div>
            <div class="code-name">.icon_help
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_add"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.icon_add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_minus"></span>
            <div class="name">
              minus
            </div>
            <div class="code-name">.icon_minus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_attachment"></span>
            <div class="name">
              attachment
            </div>
            <div class="code-name">.icon_attachment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_phone"></span>
            <div class="name">
              phone
            </div>
            <div class="code-name">.icon_phone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_bad"></span>
            <div class="name">
              bad
            </div>
            <div class="code-name">.icon_bad
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_text"></span>
            <div class="name">
              text
            </div>
            <div class="code-name">.icon_text
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon_renminbi1688"></span>
            <div class="name">
              人民币
            </div>
            <div class="code-name">.icon_renminbi1688
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="icon icon_xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            icon" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_iconfont5"></use>
                </svg>
                <div class="name">iconfont-5</div>
                <div class="code-name">#icon_iconfont5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_wxbbaobiao"></use>
                </svg>
                <div class="name">wxb报表</div>
                <div class="code-name">#icon_wxbbaobiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_wxbbiaowang"></use>
                </svg>
                <div class="name">wxb标王</div>
                <div class="code-name">#icon_wxbbiaowang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_wxbgongju"></use>
                </svg>
                <div class="name">wxb工具</div>
                <div class="code-name">#icon_wxbgongju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_wxbmingxingdianpu"></use>
                </svg>
                <div class="name">wxb明星店铺</div>
                <div class="code-name">#icon_wxbmingxingdianpu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_wxbpinpaibao"></use>
                </svg>
                <div class="name">wxb品牌宝</div>
                <div class="code-name">#icon_wxbpinpaibao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_wxbzhanghu"></use>
                </svg>
                <div class="name">wxb账户</div>
                <div class="code-name">#icon_wxbzhanghu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_wxbzhuye"></use>
                </svg>
                <div class="name">wxb主页</div>
                <div class="code-name">#icon_wxbzhuye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_wxbsousuotuiguang"></use>
                </svg>
                <div class="name">wxb搜索推广</div>
                <div class="code-name">#icon_wxbsousuotuiguang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_wxbdingwei"></use>
                </svg>
                <div class="name">wxb定位</div>
                <div class="code-name">#icon_wxbdingwei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_gouwuche"></use>
                </svg>
                <div class="name">购物车</div>
                <div class="code-name">#icon_gouwuche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_gouwuchetianjia"></use>
                </svg>
                <div class="name">购物车添加</div>
                <div class="code-name">#icon_gouwuchetianjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_cuowu"></use>
                </svg>
                <div class="name">错误</div>
                <div class="code-name">#icon_cuowu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_erweima"></use>
                </svg>
                <div class="name">二维码</div>
                <div class="code-name">#icon_erweima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_jushoucang"></use>
                </svg>
                <div class="name">聚收藏</div>
                <div class="code-name">#icon_jushoucang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_lajixiang"></use>
                </svg>
                <div class="name">垃圾箱</div>
                <div class="code-name">#icon_lajixiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_lianjie"></use>
                </svg>
                <div class="name">链接</div>
                <div class="code-name">#icon_lianjie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_naozhong"></use>
                </svg>
                <div class="name">闹钟</div>
                <div class="code-name">#icon_naozhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_saoyisao"></use>
                </svg>
                <div class="name">扫一扫</div>
                <div class="code-name">#icon_saoyisao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_shangfan"></use>
                </svg>
                <div class="name">上翻</div>
                <div class="code-name">#icon_shangfan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_shezhi"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon_shezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_shengyin"></use>
                </svg>
                <div class="name">声音</div>
                <div class="code-name">#icon_shengyin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_shijian"></use>
                </svg>
                <div class="name">时间</div>
                <div class="code-name">#icon_shijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_shouhuodizhi"></use>
                </svg>
                <div class="name">收货地址</div>
                <div class="code-name">#icon_shouhuodizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_shouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon_shouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_shuaxin"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#icon_shuaxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon_sousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_suo"></use>
                </svg>
                <div class="name">锁</div>
                <div class="code-name">#icon_suo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_tishi"></use>
                </svg>
                <div class="name">提示</div>
                <div class="code-name">#icon_tishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_wancheng"></use>
                </svg>
                <div class="name">完成</div>
                <div class="code-name">#icon_wancheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_wodedingdan"></use>
                </svg>
                <div class="name">我的订单</div>
                <div class="code-name">#icon_wodedingdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_wodefankui"></use>
                </svg>
                <div class="name">我的反馈</div>
                <div class="code-name">#icon_wodefankui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_wodehongbao"></use>
                </svg>
                <div class="name">我的红包</div>
                <div class="code-name">#icon_wodehongbao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_wodejuhuasuan"></use>
                </svg>
                <div class="name">我的聚划算</div>
                <div class="code-name">#icon_wodejuhuasuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_wodeyouhuiquan"></use>
                </svg>
                <div class="name">我的优惠券</div>
                <div class="code-name">#icon_wodeyouhuiquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_xiafan"></use>
                </svg>
                <div class="name">下翻</div>
                <div class="code-name">#icon_xiafan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_xiala"></use>
                </svg>
                <div class="name">下拉</div>
                <div class="code-name">#icon_xiala</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_xiangshangjiantou"></use>
                </svg>
                <div class="name">向上箭头</div>
                <div class="code-name">#icon_xiangshangjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_xiangxiajiantou"></use>
                </svg>
                <div class="name">向下箭头</div>
                <div class="code-name">#icon_xiangxiajiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_xiangyoujiantou"></use>
                </svg>
                <div class="name">向右箭头</div>
                <div class="code-name">#icon_xiangyoujiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_xiangzuojiantou"></use>
                </svg>
                <div class="name">向左箭头</div>
                <div class="code-name">#icon_xiangzuojiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_yanjing"></use>
                </svg>
                <div class="name">眼睛</div>
                <div class="code-name">#icon_yanjing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_yijianfankui"></use>
                </svg>
                <div class="name">意见反馈</div>
                <div class="code-name">#icon_yijianfankui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_zhaoxiangji"></use>
                </svg>
                <div class="name">照相机</div>
                <div class="code-name">#icon_zhaoxiangji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_zhengque"></use>
                </svg>
                <div class="name">正确</div>
                <div class="code-name">#icon_zhengque</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_xiaoxizhongxin"></use>
                </svg>
                <div class="name">消息中心</div>
                <div class="code-name">#icon_xiaoxizhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_lingcunwei"></use>
                </svg>
                <div class="name">另存为</div>
                <div class="code-name">#icon_lingcunwei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_new"></use>
                </svg>
                <div class="name">new</div>
                <div class="code-name">#icon_new</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_ju"></use>
                </svg>
                <div class="name">聚</div>
                <div class="code-name">#icon_ju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_suan"></use>
                </svg>
                <div class="name">算</div>
                <div class="code-name">#icon_suan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_hua"></use>
                </svg>
                <div class="name">划</div>
                <div class="code-name">#icon_hua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_ju1"></use>
                </svg>
                <div class="name">聚</div>
                <div class="code-name">#icon_ju1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_huo"></use>
                </svg>
                <div class="name">火</div>
                <div class="code-name">#icon_huo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_juzhuanchang"></use>
                </svg>
                <div class="name">聚专场</div>
                <div class="code-name">#icon_juzhuanchang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_iconfontyouhuiquan"></use>
                </svg>
                <div class="name">iconfont-youhuiquan</div>
                <div class="code-name">#icon_iconfontyouhuiquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_iconfontxingxing"></use>
                </svg>
                <div class="name">iconfont-xingxing</div>
                <div class="code-name">#icon_iconfontxingxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_iconfontmingpian"></use>
                </svg>
                <div class="name">iconfont-mingpian</div>
                <div class="code-name">#icon_iconfontmingpian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_iconfontshouji"></use>
                </svg>
                <div class="name">iconfont-shouji</div>
                <div class="code-name">#icon_iconfontshouji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_iconfontriyongbaihuo"></use>
                </svg>
                <div class="name">iconfont-riyongbaihuo</div>
                <div class="code-name">#icon_iconfontriyongbaihuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_iconfontphone"></use>
                </svg>
                <div class="name">iconfont-phone</div>
                <div class="code-name">#icon_iconfontphone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_iconfontqicheyongpin"></use>
                </svg>
                <div class="name">iconfont-qicheyongpin</div>
                <div class="code-name">#icon_iconfontqicheyongpin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_iconfontjingxihuaxue"></use>
                </svg>
                <div class="name">iconfont-jingxihuaxue</div>
                <div class="code-name">#icon_iconfontjingxihuaxue</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_iconfontyiqiyibiao"></use>
                </svg>
                <div class="name">iconfont-yiqiyibiao</div>
                <div class="code-name">#icon_iconfontyiqiyibiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_zhifubaofukuan"></use>
                </svg>
                <div class="name">支付宝付款</div>
                <div class="code-name">#icon_zhifubaofukuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_zhiliangbz"></use>
                </svg>
                <div class="name">质量保障</div>
                <div class="code-name">#icon_zhiliangbz</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_301"></use>
                </svg>
                <div class="name">30－1</div>
                <div class="code-name">#icon_301</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_7"></use>
                </svg>
                <div class="name">7</div>
                <div class="code-name">#icon_7</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_mian"></use>
                </svg>
                <div class="name">免</div>
                <div class="code-name">#icon_mian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_liwu"></use>
                </svg>
                <div class="name">礼物</div>
                <div class="code-name">#icon_liwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_yuyin"></use>
                </svg>
                <div class="name">语音</div>
                <div class="code-name">#icon_yuyin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_all"></use>
                </svg>
                <div class="name">all</div>
                <div class="code-name">#icon_all</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_cart"></use>
                </svg>
                <div class="name">cart</div>
                <div class="code-name">#icon_cart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_set"></use>
                </svg>
                <div class="name">set</div>
                <div class="code-name">#icon_set</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_play"></use>
                </svg>
                <div class="name">play</div>
                <div class="code-name">#icon_play</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_error"></use>
                </svg>
                <div class="name">error</div>
                <div class="code-name">#icon_error</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_prompt"></use>
                </svg>
                <div class="name">prompt</div>
                <div class="code-name">#icon_prompt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_success"></use>
                </svg>
                <div class="name">success</div>
                <div class="code-name">#icon_success</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_help"></use>
                </svg>
                <div class="name">help</div>
                <div class="code-name">#icon_help</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_add"></use>
                </svg>
                <div class="name">add</div>
                <div class="code-name">#icon_add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_minus"></use>
                </svg>
                <div class="name">minus</div>
                <div class="code-name">#icon_minus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_attachment"></use>
                </svg>
                <div class="name">attachment</div>
                <div class="code-name">#icon_attachment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_phone"></use>
                </svg>
                <div class="name">phone</div>
                <div class="code-name">#icon_phone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_bad"></use>
                </svg>
                <div class="name">bad</div>
                <div class="code-name">#icon_bad</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_text"></use>
                </svg>
                <div class="name">text</div>
                <div class="code-name">#icon_text</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_renminbi1688"></use>
                </svg>
                <div class="name">人民币</div>
                <div class="code-name">#icon_renminbi1688</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
